<template>
  <div class="note-templates">
    <article-title :data="data" />
    <n-grid x-gap="0 800:18" item-responsive style="padding-bottom: 20px">
      <n-gi span="1 800:1 1200:3" />
      <n-gi span="22 800:16 1200:14">
        <div v-removeMouseEffect class="note-left" :class="sideTheme">
          <slot name="note"></slot>
        </div>
      </n-gi>
      <n-gi span="0 800:6 1200:4" ref="noteRight">
        <user-card />
        <notice-card />
        <div class="note-right">
          <n-affix :top="20" position="fixed">
            <directory :list="list" :style="`width:${containerWidth}px;`" />
            <new-essay :style="`width:${containerWidth}px;`" />
          </n-affix>
        </div>
      </n-gi>
      <n-gi span="1 800:0" />
    </n-grid>
    <van-popup 
      v-model:show="showDirectory"
      :style="{ 
        width: '85%',
        borderRadius: '5px'
      }"
    >
      <directory @close="onCloseDirectory" :list="list" />
    </van-popup>
  </div>
</template>

<script setup name="NoteTemplates">
import { toRefs, onMounted, ref, nextTick, computed } from 'vue';
import { useSettingsStore } from '@/store';
import ArticleTitle from '../ArticleTemplates/components/ArticleTitle.vue';
import Directory from './components/Directory.vue';
import UserCard from '@/components/UserCard/index.vue';
import NoticeCard from '@/components/NoticeCard/index.vue';
import NewEssay from '@/components/NewEssay/index.vue';
import { useElementSize } from '@vueuse/core';
import emitter from '@/utils/mitt';

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const Props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
  list: {
    type: Array,
    default: () => [],
  },
});
const { data, list } = toRefs(Props);
const noteRight = ref(null);
const showDirectory = ref(false);
const containerWidth = useElementSize(noteRight).width;

const onCloseDirectory = () => {
  setTimeout(() => {
    showDirectory.value = false;
  },500)
}
onMounted(() => {
  emitter.on('onShowDirectory', () => {
    showDirectory.value = true;
  });
});
</script>

<style lang="scss" scoped>
.note-left {
  box-sizing: border-box;
  padding: 40px 35px;
  background: rgba(255, 255, 255, 0.9);
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
}
.note-right {
  margin-top: 20px;
  position: relative;
}

::v-deep {
  .theme-dark {
    .n-space {
      background: rgba(0, 0, 0, 0.972);
    }
  }
}
.theme-dark {
  .note-left {
    background: rgba(0, 0, 0, 0.5);
  }
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 580px) {
  .note-left {
    padding: 10px;
  }
}
</style>
